<template>
  <el-button :type="bType" @click="handleClick" :icon="iconType" :round="isRound" :circle="isCircle" style="height: 28px;" :disabled="disabled" :loading="loading">
      <span v-if="label !== ''">{{label}}</span>
    </el-button>
</template>
<script>
    export default {
      name: 'CustomBtn',
      data() {
        return {
          isRound: false,
          isCircle: false,
          loading: false
        }
      },
      props: {
        label: {
          type: String
        },
        btnType: {
          type: String,
          default: 'add'
        },
        disabled: {
          type: Boolean,
          required: false,
          default: false
        },
        icon: {
          type: String
        }
      },
      computed: {
        bType() {
          switch (this.btnType) {
            case 'add': return ''
            case 'edit': return ''
            case 'delete': return ''
            case 'confirm': return 'primary'
            case 'cancel': return ''
            case 'query': return 'primary'
            case 'text': return 'text'
            case 'save': return 'primary'
            case 'plus': return 'primary'
            case 'minus': return 'danger'
            case 'pre':return ''
            case 'next':return ''
            case 'success':return 'success'
            case 'fail':return 'danger'
            default: return ''
          }
        },
        iconType() {
          switch (this.btnType) {
            case 'add':
              this.isRound = true
              return 'el-icon-circle-plus-outline'
            case 'edit':
              this.isRound = true
              return 'el-icon-edit-outline'
            case 'delete':
              this.isRound = true
              return 'el-icon-delete'
            case 'confirm':
              return 'el-icon-check'
            case 'pre':
              return 'el-icon-d-arrow-left'
            case 'next':
              return 'el-icon-d-arrow-right'
            case 'cancel':
              return 'el-icon-close'
            case 'query':
              return 'el-icon-search'
            case 'set':
              this.isRound = true
              return 'el-icon-setting'
            case 'save':
              this.isRound = false
              return 'el-icon-document'
            case 'append':
              this.isRound = true
              return 'el-icon-check'
            case 'plus':
              this.isCircle = true
              return 'el-icon-plus'
            case 'minus':
              this.isCircle = true
              return 'el-icon-minus'
            case 'call':
              this.isRound = true
              return 'el-icon-phone-outline'
            case 'success':
              // this.isRound = true
              return 'el-icon-check'
            case 'fail':
              // this.isRound = true
              return 'el-icon-close'
            default: return ''
          }
        }
      },
      methods: {
        handleClick() {
          this.$emit('btn-click')
          this.loading = true
          setTimeout(() => {
            this.loading = false
          }, 500)
        }
      }
    }
</script>